<template>
  <div class="login-wrap">
    <div class="left">
      <!-- <img src="../../assets/img/img-3.png" alt=""> -->
    </div>
    <div class="right">
      <div class="ms-login">
        <div class="ms-title">
          <img class="img1" src="../../../assets/img/img-4.png" alt="">
          <img class="img2" src="../../../assets/img/img-6.png" alt="">
        </div>
        <el-form ref="login" :model="param" :rules="rules" label-width="0px" class="ms-content">
          <!-- 用户 -->
          <el-form-item prop="username">
            <el-input
              v-model="param.username"
              placeholder="请输入用户名"
            >
              <i slot="prefix" class="loginicn iconfont icon-yonghuming" />
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="param.password"
              type="password"
              placeholder="请输入正确密码"
              @keyup.enter.native="submitForm()"
            >
              <i slot="prefix" class="loginicn iconfont icon-mimacopy" />
            </el-input>
          </el-form-item>
          <!-- 登录 -->
          <div class="login-btn">
            <el-button type="primary" @click="submitForm()">登录</el-button>
          </div>
        </el-form>
      </div>
    </div>

  </div>
</template>

<script>
import API from '../../../api/index'
import md5 from 'js-md5'
import Cookies from 'js-cookie'
export default {
  data() {
    return {
      param: {
        username: '郑碟飞',
        password: 'huapu666'
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 2, max: 10, message: '用户名长度在 2 到 10 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 12, message: '密码长度在 5 到 12 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {

  },
  methods: {
    submitForm() {
      this.$refs.login.validate(valid => {
        if (valid) {
          // 接口请求
          const params = {
            client_id: 'platManagement',
            client_secret: 'user123',
            grant_type: 'password',
            password: md5(this.param.password),
            username: this.param.username
          }
      /*    this.loading = true
          API.login.loginFun(params).then((res) => {
            console.log(res)
            this.loading = false
            this.$message.success('登录成功')
            // this.$router.push({ path: this.redirect || '/', query: this.otherQuery })
            Cookies.set('Admin-Token', res.access_token)
            localStorage.setItem('ms_username', this.param.username)
            // this.$router.push('/')
            localStorage.setItem('huapuauth', JSON.stringify(res))
          }).catch(function(error) {
            console.log(error)
          })*/
          let a = {
            access_token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1SWQiOjUwLCJ1c2VyX25hbWUiOiLpg5Hnop_po54iLCJzY29wZSI6WyJhbGwiXSwiZGVwdElkIjoxLCJuaWNrbmFtZSI6IumDkeein-mjniIsInVzZXJ0eXBlIjoxLCJleHAiOjE1ODgwNTYxMzcsImNsaWVudElkcyI6IiIsImF1dGhvcml0aWVzIjpbIlJPTEVfMSIsIlJPTEVfMiJdLCJqdGkiOiI1NGYzMTk2Mi1lMzY0LTQ3ZTgtYmEyYi1iZTczYzUwZTUzMTkiLCJjbGllbnRfaWQiOiJwbGF0TWFuYWdlbWVudCJ9.L4uVvZyZGxKHYxfxGroP_x01sEX1cQLcA3FOn9uGWVw",
            token_type: "bearer",
            refresh_token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1SWQiOjUwLCJ1c2VyX25hbWUiOiLpg5Hnop_po54iLCJzY29wZSI6WyJhbGwiXSwiYXRpIjoiNTRmMzE5NjItZTM2NC00N2U4LWJhMmItYmU3M2M1MGU1MzE5IiwiZGVwdElkIjoxLCJuaWNrbmFtZSI6IumDkeein-mjniIsInVzZXJ0eXBlIjoxLCJleHAiOjE1OTA1NzYxMzcsImNsaWVudElkcyI6IiIsImF1dGhvcml0aWVzIjpbIlJPTEVfMSIsIlJPTEVfMiJdLCJqdGkiOiI5ZDY3YmQ4NC02MzMxLTRlZGUtYjdjYy1hNDlmMjA5YzgzMzYiLCJjbGllbnRfaWQiOiJwbGF0TWFuYWdlbWVudCJ9.MHU4wDVG-MSP-u7aBTkcxR8w2UZac2DL0jnFpCYMByE",
            expires_in: 72000,
            scope: "all",
            deptId: 1,
            nickname: "郑碟飞",
            uId: 50,
            usertype: 1,
            clientIds: "",
            jti: "54f31962-e364-47e8-ba2b-be73c50e5319"
        }
          if (a) {
            this.$message.success('登录成功');
            Cookies.set('Admin-Token', a.access_token);
            localStorage.setItem('ms_username', this.param.username);
            this.$router.push('/');
            localStorage.setItem('huapuauth', JSON.stringify(a));
          } else {
            this.loading = true
            API.login.loginFun(params).then((res) => {
              console.log(res)
              this.loading = false
              this.$message.success('登录成功')
              // this.$router.push({ path: this.redirect || '/', query: this.otherQuery })
              Cookies.set('Admin-Token', res.access_token)
              localStorage.setItem('ms_username', this.param.username)
              // this.$router.push('/')
              localStorage.setItem('huapuauth', JSON.stringify(res))
            }).catch(function(error) {
              console.log(error)
            })
          }
          // END
        } else {
          this.$message.error('请输入账号和密码')
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.login-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #ffffff !important;
   .left{
     width: 72%;
     height: 100%;
     float: left;
     background-image: url(../../../assets/img/img-3.png);
     background-size: 100%;
   }
   .right{
     width: 28%;
     height: 100%;
     float: right;
     background-image: url(../../../assets/img/img-5.png);
     background-size: 100%;
     position: relative;
     .ms-login {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 350px;
        margin: -190px 0 0 -175px;
        border-radius: 5px;
        overflow: hidden;
        .ms-title {
          width: 80%;
          line-height: 50px;
          display: flex;
          align-items: center;
          // justify-content: space-between;
          margin: 0 auto;
          .img1{
            width: 35px;
            height: 35px;
            display: block;
            margin-right: 10px;
          }
          .img2{
            width: 55%;
            display: block;
          }
        }
        .ms-content {
          // padding-top: 30px;
          margin-top: 30px;
        }
        .login-btn {
          margin-top: 5vh;
          text-align: center;
        }
        .login-btn button {
          width: 100%;
          height: 36px;
          margin-bottom: 10px;
        }
        .loginicn{
          color: rgba(153,204,255,1);
        }

      }
   }
}
</style>
<style>
.ms-login .el-input__prefix{
  margin-left: 2px;
}
</style>
